<script setup lang="ts">
import { addMenuAPI, delMenuAPI, getMenuAPI, updateMenuAPI, } from '@/apis/role';
import { MenuList, MenuResponseData, MunuData } from '@/types/role';
import { onMounted, ref } from 'vue';

//分配权限
const menuList = ref<MenuList>([])
const dialogVisible = ref(false)
const getAllMenu = async () => {
    const res: MenuResponseData = await getMenuAPI()
    menuList.value = res.data
}
onMounted(() => {
    getAllMenu()
})
//定义表单数据
const form = ref()
const menuForm = ref<MunuData>({
    code: '',
    level: 0,
    name: '',
    pid: 0,
})
//表单校验
const checkName = (_rule: any, value: any, callback: any) => {
    if (value.length >= 2) {
        callback()
    } else {
        callback(new Error('菜单名称至少要两位'))
    }
}
const checkCode = (_rule: any, value: any, callback: any) => {
    if (value.length >= 4) {
        callback()
    } else {
        callback(new Error('权限数值至少要四位'))
    }
}
// 定义规则
const rules = ({
    name: [{ validator: checkName, trigger: 'blur' }],
    code: [{ validator: checkCode, trigger: 'blur' }]
})

// 添加表单
const addMenu = (row:MunuData) => {
    //清空数据
    Object.assign(menuForm.value, {
        id: 0,
        code: '',
        level: 0,
        name: '',
        pid: 0,
    })
    dialogVisible.value = true
    menuForm.value.level = row.level +1
    //给谁新增子菜单
    menuForm.value.pid = row.id as number
}

//编辑表单
const updateMenu = (row: MunuData) => {
    dialogVisible.value = true
    Object.assign(menuForm.value, row)
}
// 取消按钮
const cancal = () => {
    form.value.resetFields()
    dialogVisible.value = false
}

//确认按钮
const confirm = async () => {
    await form.value.validate()
    if (menuForm.value.id) {
        await updateMenuAPI(menuForm.value)
        ElMessage.success('更新成功')
    } else {
        await addMenuAPI(menuForm.value)
        ElMessage.success('添加成功')
    }
    form.value.resetFields()
    dialogVisible.value = false
    getAllMenu()
}

//删除菜单
const onConfirm = async (id: number) => {
    await delMenuAPI(id)
    ElMessage.success('删除成功')
    getAllMenu()
}
</script>

<template>
    <!-- 表格组件 -->
    <el-table :data="menuList" border style="width: 100%; margin-bottom: 20px" row-key="id">
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="code" label="权限值">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间">
        </el-table-column>
        <el-table-column label="操作">
            <template #="{ row }">
                <el-button type="primary" size="small" :disabled="row.level === 4 ? true : false" @click="addMenu(row)">{{
                    row.level === 3 ?
                        '添加功能' :
                        '添加菜单' }}</el-button>
                <el-button type="primary" size="small" @click="updateMenu(row)" :disabled="row.level === 1 ?  true : false">编辑</el-button>
                <el-popconfirm :title="`你确认删除${row.name}吗?`" @confirm="onConfirm(row.id)">
                    <template #reference>
                        <el-button type="primary" size="small" :disabled="row.level === 1 ?  true : false">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 弹层组件 -->
    <el-dialog v-model="dialogVisible" :title="menuForm.id ? '编辑菜单' : '添加菜单'" width="500">
        <el-form ref="form" :model="menuForm" :rules="rules">
            <el-form-item label="名称" prop="name">
                <el-input v-model="menuForm.name" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="权限" prop="code">
                <el-input v-model="menuForm.code" placeholder="请输入权限数值"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancal">取消</el-button>
                <el-button type="primary" @click="confirm">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss"></style>